<template>
  <PageTabelLayout>
    <template #pageHeader>
      <div class="my-header" v-if="headerShow">
        <div class="search-form" style="padding: 10px;box-sizing: border-box;">
          <a-form size="small" :model="searchData" auto-label-width layout="inline">


            <a-form-item label="开单日期" label-col-flex="80px" :style="{width:'320px'}">
              <a-range-picker popup-container="html" class="bacClass"/>
            </a-form-item>


            <a-form-item label="流转卡号" label-col-flex="80px" :style="{width:'320px'}">
              <a-input placeholder="输入流转卡号" class="bacClass" allow-clear/>
            </a-form-item>


            <a-form-item label="布号" label-col-flex="80px" :style="{width:'320px'}">
              <a-input placeholder="输入布号" class="bacClass" allow-clear/>
            </a-form-item>


            <a-form-item label="品名" label-col-flex="80px" :style="{width:'320px'}">
              <a-input placeholder="输入品名" class="bacClass" allow-clear/>
            </a-form-item>


            <a-form-item label="计划单号" label-col-flex="80px" :style="{width:'320px'}">
              <a-input placeholder="输入计划单号" class="bacClass" allow-clear/>
            </a-form-item>


            <a-form-item label="客户名称" label-col-flex="80px" :style="{width:'320px'}">
              <a-input placeholder="输入客户名称" class="bacClass" allow-clear/>
            </a-form-item>

          </a-form>
        </div>
      </div>
      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up v-if="headerShow" @click="changHeadShow(false)" :strokeWidth="2" :size="18"/>
          <icon-double-down v-else @click="changHeadShow(true)" :strokeWidth="2" :size="18"/>
        </a-divider>
      </div>
      <div class="my-tool-bar" style="padding:0px 10px 10px 0px;box-sizing: border-box;">
        <Toolbar
            :items="['查询', '导出']"
            @select="selectHandler"
            @export="exportHandler"/>
      </div>
    </template>
    <template #pageTabel>
      <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple"
                       @grid-ready="gridReady"
                       style="height:calc(100% - 45px)" class='ag-theme-alpine'
                       :defaultColDef="defaultColDef" :rowData="table.dataList"
                       :columnDefs="cfsValue" :localeText="localeTextData"/>
    </template>
    <!-- <paginationCopys :total="total" show-total show-jumper
            show-page-size @change="changePage"
            @page-size-change="changeSize"
            style="justify-content: center;margin-top: 10px;"
            :page-size="pagination.pageSize" :current="pagination.page" /> -->
  </PageTabelLayout>
</template>

<script lang="ts">
import {reactive, ref, onMounted} from 'vue'
import {useTable, useRowKey, usePagination, useRowSelection} from '@/hooks/table'
import PageTabelLayout from '@/components/pageTabelLayout.vue';

import {localeText} from '@/api/aggridZw'
import emitter from "@/hooks/useEventBus";
import {Message} from '@arco-design/web-vue';
import {assTable} from '@/utils/assemblyLevelTable';
import {verfiyManageInfo} from '@/api/PhysicalSurveyRoom/physicalTestApi'
import {post} from '@/api/http'

export default {
  name: "phyInfoDetailQuery",
  setup() {
    let verfiyManageInfoApi = verfiyManageInfo();
    let headerShow = ref<boolean>(true);
    const pageData = reactive<{
      pageLoading: boolean,
    }>({
      pageLoading: false
    });
    onMounted(() => {
      // 第一个页面需要在刚进入就调用一次  切换tap时也需要调用
      doRefresh();
      emitter.on("refresh-phyInfoDetailQuery", () => {
        doRefresh();
        // gridOption.value.sizeColumnsToFit();
      });
    });
    const selectHandler = () => {
      pagination.pageSize = 1;
      doRefresh();
    };
    const exportHandler = () => {
      let selectList = gridOption.value.getSelectedRows();
      // console.log(selectList);
      if (selectList.length === 0) {
        Message.error('请勾选需要导出的数据')
        return
      } else {
        //导出数据
        let nowRow = table.dataList.filter(function (o) {
          return (gridOption.value.getSelectedRows().map((o: any) => {
            return o.id
          })).indexOf(o["id"]) !== -1;
        })
        assTable(cfsValue, nowRow, '物测信息明细');
      }
    };
    const searchData = reactive({})
    const doRefresh = async () => {
      // pageData.pageLoading = true;
      //  await verfiyManageInfoApi.getVerifyInfoList({
      //      page: pagination.page,
      //      size: pagination.pageSize,
      //      ...searchData,
      //      auditState: 1
      //  }).then(({code,data}:any) => {
      //      if (code === 200) {
      //         console.log(data);
      //         //  table.handleSuccess(data.list);
      //         //  gridOption.value.setRowData(data.list);
      //         //  total.value = data.total;
      //      }
      //  }).catch(console.log).finally(() => {
      //      pageData.pageLoading = false;
      //  });
      post({
        url: 'pdm/VerifyManage/getVerifyManageDetailList',
        data: {
          // page: pagination.page,
          // size: pagination.pageSize,
          // searchDataTimes
          beginDate: searchDataTimes.value.length < 1 ? '' : searchDataTimes.value[0],
          endDate: searchDataTimes.value.length < 1 ? '' : searchDataTimes.value[1],
          ...searchData,
        }
      }).then((res) => {
        if (res.code == 200) {
          table.dataList = res.data
          gridOption.value.setRowData(res.data)
        } else {
          Message.error('查询失败')
        }
      })
    };
    const scrollbar = ref(true);
    const pagination = usePagination(doRefresh);
    const {selectedRowKeys} = useRowSelection();
    const table = useTable();
    const rowKey = useRowKey("id");
    //表格方面
    const gridOption = ref();
    const gridReady = (params: any) => {
      gridOption.value = params.api;
      //调整表格自适应大小
      //   gridOption.value.sizeColumnsToFit();
    }
    const defaultColDef = {
      sortable: true,
      resizable: true,
      filter: true,
      width: 150
      // flex: 1
    }
    let cfsValue: any = [
      // {
      //     headerName: "序号",
      //     field: "depart",
      // },
      {
        headerName: "记录单号",
        field: "verifyManageCode",
      },
      {
        headerName: "开单日期",
        field: "verifyManageDate",
      },
      {
        headerName: "客户名称",
        field: "customName",
      },
      {
        headerName: "流转卡号",
        field: "circulatCard",
      },
      {
        headerName: "计划单号",
        field: "planCode",
      },
      {
        headerName: "客户订单号",
        field: "customOrderNo",
      },
      {
        headerName: "色号",
        field: "colorCode",
      },
      {
        headerName: "色称",
        field: "colorName",
      },
      {
        headerName: "布号",
        field: "clothCode",
      },
      {
        headerName: "品名",
        field: "brandName",
      },
      {
        headerName: "纱支",
        field: "yarnCount",
      },
      {
        headerName: "重量",
        field: "weight",
      },
      {
        headerName: "匹数",
        field: "pieceNum",
      },
      // {
      //     headerName: "胚号批号",
      //     field: "depart",
      // },
      {
        headerName: "门幅",
        children: [
          {
            headerName: "要求",
            field: "requireWidth",

          },
          {
            headerName: "实测",
            field: "measuredWidth",

          },
        ]
      },
      {
        headerName: "克重",
        children: [
          {
            headerName: "要求",
            field: "requireWeight",

          },
          {
            headerName: "实测",
            field: "measuredWeight",

          },
        ]
      },
      {
        headerName: "洗后",
        children: [
          {
            headerName: "克重",
            field: "washWeightThrowDry",

          },
          {
            headerName: "门幅",
            field: "depart",

          },
        ]
      },
      {
        headerName: "测试结果",
        field: "verifyResult",
      },
      {
        headerName: "不合格项目",
        field: "depart",
      },
      {
        headerName: "计划单号",
        field: "planCode",
      },
      {
        headerName: "测试标准",
        field: "verifyStandard",
      },
      {
        headerName: "审核状态",
        field: "auditState",
        cellRenderer: function (params) {
          return params.value == 0 ? '未审核' : '已审核'
        }
      },
      {
        headerName: "测试类型",
        field: "depart",
      },
      {
        headerName: "测试结果",
        field: "verifyResult",
      },
      {
        headerName: "测试项目",
        field: "verifyProject",
      },
      {
        headerName: "面料测试大类",
        field: "fabicVerifyClass",
      },
      {
        headerName: "测试方法",
        field: "verifyMethod",
      },
      {
        headerName: "面料测试要求最小值",
        field: "verifyMinNum",
      },
      {
        headerName: "面料测试要求最大值",
        field: "verifyMaxNum",
      },
      {
        headerName: "备注",
        field: "remark",
      },
      {
        headerName: "测试结果",
        field: "verifyResult",
      },
      {
        headerName: "评判结果",
        field: "judgeResult",
      },
      // {
      //     headerName: "是否审核",
      //     field: "depart",
      // },
      {
        headerName: "登记日期",
        field: "createTime",
      },
      {
        headerName: "审核日期",
        field: "auditDate",
      },
      {
        headerName: "审核人",
        field: "auditPerson",
      },
    ];
    let a = [{
      showRowGroup: 'hide_def',
      "headerName": "",
      "checkboxSelection": true,
      "headerCheckboxSelection": true,
      "pinned": "left",
      "width": 50,
      resizable: false,
      filter: false,
      sortable: false,
      minWidth: 50,
      maxWidth: 50,
      lockPosition: "left",
    }]
    cfsValue = a.concat(cfsValue);
    const total = ref(10);
    const changePage = (val: any) => {
      pagination.page = val
      doRefresh();
    }
    const changeSize = (val: any) => {
      pagination.pageSize = val
      doRefresh();
    }
    let changHeadShow = (boolVal: boolean) => {
      headerShow.value = boolVal;
      emitter.emit('window-change');
    }
    const localeTextData: any = ref(localeText);

    const searchDataTimes = ref([])

    const searchDataTimesclear = () => {
      searchDataTimes.value = []
    }
    return {
      searchDataTimesclear,
      searchDataTimes,
      selectHandler,
      exportHandler,
      searchData,
      scrollbar,
      pagination,
      selectedRowKeys,
      table,
      rowKey,
      headerShow,
      changePage,
      changeSize,
      localeTextData,
      defaultColDef,
      gridReady,
      cfsValue,
      total,
      changHeadShow,
    };
  },
  components: {PageTabelLayout, }
}
</script>

<style scoped>
.bacClass {
  width: 270px;
  background: #fff;
  border: 1px solid #c9cdd3;
}

:deep(.arco-picker input) {
  padding-left: 0 !important;
}

:deep(.arco-picker) {
  padding-left: 0 !important;
}

:deep(.arco-picker-separator) {
  padding: 0 !important;
}

</style>